<template>
  <PageLayout :title="t('订单列表')" :searchConfig="searchConfig" @search="search">
    <template #search> </template>
    <template #operation>
      <div class="button-box">
        <a-button @click.stop="handleAdd">{{ t('新增') }}</a-button>
      </div>
    </template>
    <template #right>
      <div v-if="data.dataSource.length > 0">
        <a-table
          bordered
          :pagination="{
            hideOnSinglePage: true,
          }"
          :data-source="data.dataSource"
          :columns="configColumns"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <Icon
                icon="clarity:note-edit-line"
                class="edit-icon"
                @click.stop="handleEdit(record)"
              />

              <a-popconfirm title="确定删除吗?" @confirm="handleDelete(record)">
                <Icon icon="ant-design:delete-outlined" class="delete-icon" @click.stop="" />
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </div>
      <div v-else>
        <EmptyBox />
      </div>
      <Form v-if="data.visible" @cancel="cancelForm" :data="data.editData" />
    </template>
  </PageLayout>
</template>
<script lang="ts" setup>
  import { onMounted, reactive } from 'vue';
  import { PageLayout, EmptyBox } from '/@/components/ModalPanel';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicColumn } from '/@/components/Table';
  import { getOrderList, getOrderDetail, deleteOrder } from './api/index';
  import { Icon } from '/@/components/Icon/index';
  import Form from './Form.vue';
  import { notification } from 'ant-design-vue';
  const { t } = useI18n();
  interface DataItem {
    OrderNum: number;
    OrderName: string;
    OrderPriceCount: number;
    OrderManager: string;
  }
  const defaultFormData: DataItem = {
    OrderNum: 0,
    OrderName: '',
    OrderPriceCount: 0,
    OrderManager: '',
  };
  const configColumns: BasicColumn[] = [
    {
      title: t('订单名称'),
      dataIndex: 'OrderName',
      align: 'left',
    },
    {
      title: t('订单编码'),
      dataIndex: 'OrderNum',
      width: 120,
      align: 'left',
    },
    {
      title: t('订单总金额'),
      dataIndex: 'OrderPriceCount',
      width: 120,
      align: 'left',
    },
    {
      title: t('负责人'),
      dataIndex: 'OrderManagerName',
      width: 120,
      align: 'left',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 120,
    },
  ];
  const searchConfig = [
    {
      field: 'keyword',
      label: t('关键字'),
      type: 'input',
    },
    {
      field: 'userID',
      label: t('负责人'),
      type: 'user',
    },
  ];
  let data: {
    visible: boolean;
    dataSource: Array<DataItem>;
    editData: DataItem;
    params: {
      keyword: string;
      userID: string;
    };
  } = reactive({
    visible: false,
    dataSource: [],
    editData: defaultFormData,
    params: {
      keyword: '',
      userID: '',
    },
  });
  onMounted(() => {
    data.dataSource = [];
    getList();
  });
  async function getList() {
    let res = await getOrderList({
      keyword: data.params.keyword,
      userID: data.params.userID,
    });
    data.dataSource = res;
  }
  function search(params?: any) {
    data.params.keyword = '';
    data.params.userID = '';
    if (params.keyword) {
      data.params.keyword = params.keyword;
    }
    if (params.userID) {
      data.params.userID = params.userID[0];
    }
    data.dataSource = [];
    getList();
  }
  function handleAdd() {
    data.editData = defaultFormData;
    data.visible = true;
  }
  async function handleEdit(record) {
    try {
      let res = await getOrderDetail(record.OrderID);
      data.editData = res;
      data.visible = true;
    } catch (error) {}
  }
  async function handleDelete(record) {
    try {
      let res = await deleteOrder(record.OrderID);
      if (res) {
        notification.success({
          message: '提示',
          description: '删除成功',
        }); //提示消息
        cancelForm();
      } else {
        notification.error({
          message: '提示',
          description: '删除失败',
        }); //提示消息
      }
    } catch (error) {}
  }
  function cancelForm() {
    data.visible = false;
    getList();
  }
</script>
<style lang="less" scoped>
  .list-box {
    display: flex;
    flex-wrap: wrap;

    .item {
      position: relative;
      margin: 8px;
      width: 258px;
      height: 184px;
      overflow: hidden;
      border-radius: 4px;
      padding-bottom: 36px;
      box-shadow: 0 3px 6px 1px rgb(0 0 0 / 16%);
    }
  }

  .page-box {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
</style>
